import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export default (apiFn) => {
  // 参数apiFn调用接口 的方法
  const result = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 触发一次后取消继续监听
      stop()
      apiFn().then(data => {
        result.value = data.result
      })
    }
  }, {
    // 内容到可视区的门槛0/默认值不是0
    threshold: 0
  })
  // 返回值
  // 1、target表示别监的 DOM元素
  // 2、result表示返回的数据
  return { target, result }
}
